<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的合同 - 阿姨端</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .contract-card {
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .contract-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
        .tab-active {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
        }
    </style>
</head>
<body class="pb-20">
    <!-- 顶部导航 -->
    <div class="bg-white sticky top-0 z-10 shadow-sm">
        <div class="flex items-center justify-between px-4 py-3">
            <button class="text-gray-600" onclick="history.back()">
                <i class="fas fa-chevron-left text-lg"></i>
            </button>
            <h1 class="text-lg font-medium">我的合同</h1>
            <div class="w-6"></div>
        </div>
    </div>

    <!-- 状态筛选 -->
    <div class="bg-white px-4 py-3 shadow-sm">
        <div class="flex space-x-6">
            <button class="text-sm font-medium px-1 pb-1 tab-active">全部</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">待签署</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">已签署</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">已完成</button>
            <button class="text-sm font-medium px-1 pb-1 text-gray-500">已终止</button>
        </div>
    </div>

    <!-- 合同列表 -->
    <div class="px-4 py-4 space-y-4">
        <!-- 待签署合同 -->
        <div class="contract-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="font-medium">月嫂服务合同</h3>
                    <p class="text-sm text-gray-500 mt-1">合同编号: CT20240620001</p>
                </div>
                <span class="px-2 py-1 bg-orange-100 text-orange-600 text-xs rounded-full">待签署</span>
            </div>
            
            <div class="space-y-2 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">雇主:</span>
                    <span>陈女士</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">服务期间:</span>
                    <span>2024-06-20 至 2024-07-16</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">合同金额:</span>
                    <span class="font-medium text-green-600">¥8,800.00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">创建时间:</span>
                    <span>2024-06-18 14:30</span>
                </div>
            </div>
            
            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">查看详情</button>
                <button class="flex-1 py-2 bg-indigo-600 text-white rounded text-sm">立即签署</button>
            </div>
        </div>

        <!-- 已签署合同 -->
        <div class="contract-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="font-medium">深度保洁服务合同</h3>
                    <p class="text-sm text-gray-500 mt-1">合同编号: CT20240615001</p>
                </div>
                <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full">已签署</span>
            </div>
            
            <div class="space-y-2 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">雇主:</span>
                    <span>张先生</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">服务时间:</span>
                    <span>2024-06-15 10:00-14:00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">合同金额:</span>
                    <span class="font-medium text-green-600">¥298.00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">签署时间:</span>
                    <span>2024-06-14 16:20</span>
                </div>
            </div>
            
            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">查看合同</button>
                <button class="flex-1 py-2 bg-green-500 text-white rounded text-sm">开始服务</button>
            </div>
        </div>

        <!-- 已完成合同 -->
        <div class="contract-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="font-medium">日常保洁服务合同</h3>
                    <p class="text-sm text-gray-500 mt-1">合同编号: CT20240610002</p>
                </div>
                <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">已完成</span>
            </div>
            
            <div class="space-y-2 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">雇主:</span>
                    <span>李女士</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">服务时间:</span>
                    <span>2024-06-10 14:00-17:00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">合同金额:</span>
                    <span class="font-medium text-green-600">¥198.00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">完成时间:</span>
                    <span>2024-06-10 17:15</span>
                </div>
            </div>
            
            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">查看合同</button>
                <button class="flex-1 py-2 bg-yellow-500 text-white rounded text-sm">查看评价</button>
            </div>
        </div>

        <!-- 已终止合同 -->
        <div class="contract-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="font-medium">家电清洗服务合同</h3>
                    <p class="text-sm text-gray-500 mt-1">合同编号: CT20240605003</p>
                </div>
                <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full">已终止</span>
            </div>
            
            <div class="space-y-2 mb-4">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">雇主:</span>
                    <span>王女士</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">原定时间:</span>
                    <span>2024-06-08 09:00-12:00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">合同金额:</span>
                    <span class="font-medium text-gray-500">¥380.00</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">终止时间:</span>
                    <span>2024-06-06 10:30</span>
                </div>
            </div>
            
            <div class="p-3 bg-red-50 rounded text-red-700 text-sm mb-3">
                <i class="fas fa-exclamation-circle mr-1"></i>
                终止原因: 雇主临时取消服务
            </div>
            
            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">查看详情</button>
                <button class="flex-1 py-2 bg-gray-300 text-gray-600 rounded text-sm" disabled>已终止</button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->

    <script>
        // 状态筛选切换
        document.querySelectorAll('.flex.space-x-6 button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.flex.space-x-6 button').forEach(btn => {
                    btn.classList.remove('tab-active');
                    btn.classList.add('text-gray-500');
                });
                this.classList.add('tab-active');
                this.classList.remove('text-gray-500');
                
                // 这里可以添加筛选逻辑
                console.log('筛选状态:', this.textContent.trim());
            });
        });

        // 合同操作按钮
        document.querySelectorAll('.contract-card button').forEach(button => {
            button.addEventListener('click', function() {
                if (this.textContent.includes('签署')) {
                    alert('跳转到合同签署页面...');
                } else if (this.textContent.includes('查看')) {
                    alert('查看合同详情...');
                } else if (this.textContent.includes('开始服务')) {
                    alert('开始服务...');
                } else if (this.textContent.includes('评价')) {
                    alert('查看服务评价...');
                }
            });
        });
    </script>
</body>
</html>